<template>
	<view class="page-container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<image class="avatar" :src="data.avatar || avatar" mode="aspectFill" />
			<view class="user-info">
				<view class="name-row">
					<text class="name">{{ data.name || '未命名用户' }}</text>
					<!-- <uni-icons v-if="data.gender" :type="data.gender === 'male' ? 'male' : 'female'"
						:color="data.gender === 'male' ? '#4a90e2' : '#ff6b81'" size="18" /> -->
				</view>
				<text class="position">{{ (data.d_ids && data.d_ids.text) || '未设置部门' }}</text>
				<text class="department">{{ (data.j_ids && data.j_ids.text) || '未设置职务' }}</text>

				<view class="divider-line"></view>
				<text class="comment">{{ data.comment || '这个家伙很懒，什么都没留下' }}</text>
			</view>
		</view>

		<!-- 功能区 -->
		<view class="section-title">
			<text>功能区</text>
		</view>

		<view class="menu-grid">
			<view v-for="(item, index) in menus" :key="item.id" class="menu-item" @click="onClick(item.id)">
				<view class="icon-wrapper" :style="{ backgroundColor: item.bgColor }">
					<!-- <image v-if="item.icon" class="icon" :src="item.icon" mode="aspectFit" /> -->
					<roc-icon-plus :name="item.uniIcon" type="fas" :size="24" />
				</view>
				<text class="menu-title">{{ item.name }}</text>
				<text v-if="item.desc" class="menu-desc">{{ item.desc }}</text>
			</view>
		</view>

		<!-- 退出按钮 -->
		<view class="logout-btn" @click="onClick(4)">
			<roc-icon-plus name="sign-out" type="fas" :size="24" />
			<text>退出登录</text>
		</view>

		<!-- 底部信息 -->
		<!-- <view class="footer">
			<text>版本号 v1.2.0</text>
			<text>© 2023 公司名称</text>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: '/static/avatar/empty.png',
				menus: [{
						id: 0,
						name: '修改密码',
						desc: '定期更换密码更安全',
						// icon: '/static/icon/password.png',
						bgColor: '#e6f7ff',
						uniIcon: 'key'
					},
					{
						id: 1,
						name: '我的服务',
						desc: '查看我申请的服务',
						// icon: '/static/icon/service.png',
						bgColor: '#f6ffed',
						uniIcon: 'crown'
					},
					{
						id: 3,
						name: '个人信息',
						desc: '编辑个人资料',
						// icon: '/static/tarbar/user.png',
						bgColor: '#fff7e6',
						uniIcon: 'file-edit'
					}
				],
				data: {
					_id: "",
					name: '张明',
					comment: '',
					d_ids: {
						text: '技术研发部'
					},
					j_ids: {
						text: '高级前端工程师'
					},
					avatar: '',
					gender: 'male'
				}
			}
		},
		onShow() {
			this.loadUserData();
		},
		methods: {
			loadUserData() {
				if (!uni.getStorageSync('isLogin')) {
					uni.$router.to('pages/login/login')
				} else {
					const userinfo = uni.getStorageSync('userInfo') || {};
					this.data = {
						...this.data,
						...userinfo,
						name: userinfo.username || userinfo.name || '未命名用户'
					};
				}
			},

			logout() {
				uni.showModal({
					title: '退出确认',
					content: '确定要退出当前账号吗？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('isLogin');
							uni.removeStorageSync('userInfo');
							uni.$router.reLaunch('pages/index/index');
						}
					}
				});
			},

			onClick(index) {
				switch (index) {
					case 0:
						uni.$router.to({
							url: '/pages/user/modifypwd',
							params: {
								_id: this.data._id
							}
						});
						break;
					case 1:
						uni.$router.to({
							url: '/pages/user/service/menu',
							params: {
								_id: this.data._id
							}
						});
						break;
					case 3:
						uni.$router.to('/pages/user/detail');
						break;
					case 4:
						this.logout();
						break;
					default:
						//console.warn('未知操作:', index);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-container {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding: 20rpx 30rpx 0;
		display: flex;
		flex-direction: column;
	}

	.user-card {
		display: flex;
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

		.avatar {
			width: 160rpx;
			height: 160rpx;
			border-radius: 12rpx;
			border: 1rpx solid #f0f0f0;
			margin-right: 30rpx;
			background-color: #f9f9f9;
		}

		.user-info {
			flex: 1;
			display: flex;
			flex-direction: column;

			.name-row {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				.name {
					font-size: 38rpx;
					font-weight: 600;
					color: #333;
					margin-right: 15rpx;
				}
			}

			.position {
				font-size: 30rpx;
				color: #444;
				font-weight: 500;
				margin-bottom: 8rpx;
			}

			.department {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 25rpx;
			}

			.divider-line {
				height: 1rpx;
				background: repeating-linear-gradient(to right, #eee 0, #eee 8rpx, transparent 8rpx, transparent 16rpx);
				margin-bottom: 25rpx;
			}

			.comment {
				font-size: 28rpx;
				color: #777;
				line-height: 1.6;
			}
		}
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
	}

	.menu-grid {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 20rpx;
		margin-bottom: 40rpx;

		.menu-item {
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			display: flex;
			align-items: center;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
			transition: all 0.2s;

			&:active {
				transform: translateY(4rpx);
				box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
				background-color: #fafafa;
			}

			.icon-wrapper {
				width: 80rpx;
				height: 80rpx;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 25rpx;

				.icon {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.menu-title {
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
				margin-bottom: 6rpx;
			}

			.menu-desc {
				font-size: 26rpx;
				color: #888;
				margin-left: 10rpx;
			}
		}
	}

	.logout-btn {
		text-align: center;
		color: #666;
		font-size: 32rpx;
		padding: 30rpx 0;
		margin: 20rpx 0 40rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
		transition: all 0.2s;

		&:active {
			background-color: #fafafa;
			color: #f56c6c;
		}
	}

	.footer {
		text-align: center;
		padding: 40rpx 0;
		font-size: 24rpx;
		color: #999;
		margin-top: auto;

		text {
			display: block;
			line-height: 1.8;
		}
	}
</style>